<template>
	<view class="task-box left clearfix">
		<!--头部开始-->
		<view class="task-header-box left clearfix fixed">
			<!--顶部选项卡-->
			<view class="task-header-title left clearfix">
				<view  style="margin-left:1rem;" @click="navigatorToPage(1)">我发布的</view>
				<view  class="currentTitle" @click="navigatorToPage(2)">我报名的</view>
				<view  @click="navigatorToPage(3)">我招募的</view>
			</view>
			
			<!--搜索框-->
			<view class="task-so-box left clearfix">
				<input placeholder="请输入关键词搜索任务" v-model="keyword" />
				<view class="task-so-icon right">
					<uni-icons type="search" size="25" color="#999"></uni-icons>
				</view>
			</view>
			
			<!--分类选项卡-->
			<view class="task-labels left clearfix">
				<view class="current-label">全部</view>
				<view>待反选</view>
				<view>进行中</view>
				<view>已完成</view>
				<view>已结束</view>
			</view>
		</view>
		
		<!--内容展示区域-->
		<view class="task-content left clearfix">
			<task-signup-item v-for="(item,index) in 10"></task-signup-item>
		</view>
		<wht-tabbar v-model:current="currentTab" :centerIndex="2" />
	</view>
</template>

<style>
	body,page{background:#f5f5f5;}
</style>
<style scoped>
	.task-content{width:96%;margin-left:2%;min-height:20rem;margin-top:13.5rem;padding-bottom:7rem;}
	.current-label{border-bottom:2px solid #2979ff;}
	.task-labels view{width:3rem;margin-left:.5rem;margin-right:.5rem;height:2rem;line-height:2rem;text-align: center;float:left;font-size:.9rem;}
	.task-labels{width:96%;margin-left:2%;line-height:2rem;height:2rem;margin-top:.8rem;}
	.task-so-icon{width:2.5rem;height:2.5rem;line-height:2.5rem;text-align: center;margin-right:.5rem;}
	.task-so-box input{width:70%;height:2.5rem;line-height:2.5rem;margin-left:1rem;float:left;font-size:.9rem;}
	.task-so-box{width:90%;height:2.5rem;margin-left:5%;border:1px solid #eee;background:#fff;border-radius: 1.25rem;margin-top:.5rem;}
	.task-header-title view{float:left;line-height:3rem;height:3rem;margin-left:.5rem;margin-right:.5rem;}
	.currentTitle{font-size:1.1rem;color:#2979ff;font-weight:bold;}
	.task-header-title{width:100%;height:3rem;line-height:3rem;margin-top:3rem;}
	.task-header-box{width:100%;height:12.5rem;background:url('https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/images/task-head-bj.jpg') no-repeat center center;background-size:cover;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);top:0;left:0;right:0;}
	.task-box{width:100%;min-height:20rem;}
</style>

<script>
	export default {
		data() {
			return {
				keyword:''
			}
		},
		methods: {
			//跳转页面
			navigatorToPage(index){
				if(index == 1){
					uni.navigateTo({
						url:'/pages/task/task'
					})
				}else if(index == 2){
					uni.navigateTo({
						url:'/pages/task/sign-up'
					})
				}else{
					uni.navigateTo({
						url:'/pages/task/recruit'
					})
				}
			}
		}
	}
</script>

